<template>
  <div class="app-container">
    <!--  查询  -->
    <el-card>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline cardH"
      >
        <el-form-item label="起始">
          <el-date-picker
            v-model="formInline.start_time"
            type="date"
            placeholder="选择日期"
          />
          <!-- <el-input
            v-model="formInline.start_time"
            size="mini"
            clearable
            placeholder="请输入参数名称"
          /> -->
        </el-form-item>
        <el-form-item label="截至">
          <el-date-picker
            v-model="formInline.end_time"
            type="date"
            placeholder="选择日期"
          />
          <!-- <el-input
            v-model="formInline.end_time"
            size="mini"
            clearable
            placeholder="请输入参数名称"
          /> -->
        </el-form-item>
        <!-- 监控 -->
        <el-form-item class="itemWidth">
          <el-select
            v-model="formInline.station_id"
            size="mini"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 级别 -->
        <el-form-item class="itemWidth">
          <el-select
            v-model="formInline.device_name"
            size="mini"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item class="itemWidth">
          <el-select
            v-model="formInline.status"
            size="mini"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.keyword"
            size="mini"
            clearable
            placeholder="关键字:报警编号、站点名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 5px"
            @click="search"
            >查询</el-button
          >
          <el-dropdown @command="handleCommand">
            <el-button type="primary" size="mini">
              批量操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">确认</el-dropdown-item>
              <el-dropdown-item command="b">完成</el-dropdown-item>
              <el-dropdown-item command="c">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <!--  table  -->
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 20px"
        size="mini"
        :default-sort="{ prop: formInline.sort, order: formInline.order }"
        @sort-change="tableSortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="报警编号" align="center" />
        <el-table-column prop="station_name" label="站点名称" align="center" />
        <el-table-column prop="monitor_name" label="回路名称" align="center" />
        <el-table-column
          prop="describe"
          label="事件描述"
          align="center"
          :show-overflow-tooltip="true"
          width="200"
          sortable
        />
        <el-table-column prop="level" label="报警级别" align="center" />
        <el-table-column
          prop="created_at"
          label="事件发生时间"
          align="center"
        />
        <!-- <el-table-column prop="tem_id" label="当前值" align="center" />
        <el-table-column prop="tem_id" label="阈值" align="center" /> -->
        <el-table-column prop="status_name" label="当前状态" align="center" />
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="mini"
                type="primary"
                title="确认"
                icon="el-icon-check"
                @click="operate(scope.row, 5)"
              />
              <el-button
                size="mini"
                type="primary"
                title="抢修"
                icon="el-icon-position"
                @click="operate(scope.row, 4)"
              />
              <el-button
                size="mini"
                type="primary"
                title="删除"
                icon="el-icon-close"
                @click="operate(scope.row, 6)"
              />
              <el-button
                size="mini"
                type="primary"
                title="报修"
                icon="el-icon-refresh-left"
                @click="operate(scope.row, 3)"
              />
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页   -->
      <el-pagination
        style="float: right"
        :page-size="10"
        :current-page="formInline.offset"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-button style="display: none" :plain="true" @click="open4"
      >错误</el-button
    >
    <el-dialog title="选择状态" :visible.sync="dialogVisible" width="30%">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="任务状态" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="3">报修</el-radio>
            <el-radio label="4">抢修</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务级别" prop="task_level">
          <el-input
            v-model="ruleForm.task_level"
            placeholder="如：一般，紧急等"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  allChange,
  deleteVideoFile,
  getLeval,
  getStatus,
  policeList,
  policeOperate,
  stationAllList1,
} from '@/api/fileManage'

export default {
  name: 'index',
  data() {
    return {
      infoFlag: false, // 详情信息查看
      infoId: 0,
      detailTitle: '新增', // 模板组件
      detailFlag: false, // 模板组件
      detailId: 0, // 模板组件
      total: 0,
      tableData: [],
      // 搜索表单
      formInline: {
        sort: 'created_at',
        offset: 1,
        limit: 10,
        order: 'ascending',
        start_time: '',
        end_time: '',
        status: '',
        station_id: '',
        keyword: '',
        device_name: '',
      },
      options1: [],
      options2: [],
      options3: [],
      multipleSelection: [],
      dialogVisible: false,
      ruleForm: {
        id: '',
        type: '3',
        task_level: '',
      },
      rules: {
        type: [{ required: true, message: '请输入任务级别', trigger: 'blur' }],
        task_level: [
          { required: true, message: '请选择任务状态', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.getSeven()
    this.getStation()
    this.getStatuss()
    this.getLevals()
  },
  mounted() {},
  methods: {
    //  选择一周前
    getSeven() {
      const that = this
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      that.formInline.start_time = that.formatDate(start)
      that.formInline.end_time = that.formatDate(end)
    },
    /**
     * 格式化时间
     */
    formatDate(t) {
      const year = t.getFullYear()
      const month = this.dateIfAddZero(t.getMonth() + 1)
      const day = this.dateIfAddZero(t.getDate())
      const hours = this.dateIfAddZero(t.getHours())
      const minutes = this.dateIfAddZero(t.getMinutes())
      const seconds = this.dateIfAddZero(t.getSeconds())
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },
    open4() {
      this.$message.error('请选择要操作的数据')
    },
    // 表格选中
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 批量操作
    handleCommand(command) {
      const obj = this.formInline
      if (this.multipleSelection.length == 0) {
        this.open4()
      } else {
        const data = {
          type: 5,
          ids: [],
        }
        if (command == 'a' || command == 'b') {
          data.type = 5
        } else {
          data.type = 6
        }
        this.multipleSelection.forEach((item) => {
          data.ids.push(item.id)
        })
        allChange(data).then((res) => {
          this.formInline = obj
          this.getList()
        })
      }
    },
    dateIfAddZero(time) {
      return time < 10 ? '0' + time : time
    },
    // 获取站点
    getStation() {
      stationAllList1().then((res) => {
        if (res.code == 200) {
          this.options1 = res.data.data
        }
      })
    },
    // 获取z状态
    getStatuss() {
      getStatus().then((res) => {
        if (res.code == 200) {
          this.options3 = res.data.data
          this.formInline.status = this.options3[0].id
          this.getList()
        }
      })
    },
    // 获取级别
    getLevals() {
      getLeval().then((res) => {
        if (res.code == 200) {
          this.options2 = res.data.list
        }
      })
    },
    /**
     * @description: 查询
     * @author: 书童
     */
    search() {
      this.getList()
    },
    /**
     * @description: 删除
     * @author: 书童
     */
    del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteVideoFile({ id }).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.getList()
        })
      })
    },
    //  表格操作  5：确认 3：报修 4：抢修 6：删除
    operate(a, num) {
      if (num == 5 || num == 6) {
        const data = {
          id: a.id,
          type: num,
        }
        policeOperate(data).then((res) => {
          if (res.code == 200) {
            this.getList()
          }
        })
      } else {
        this.ruleForm.type = num.toString()
        this.ruleForm.id = a.id
        this.dialogVisible = true
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          policeOperate(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.getList()
              this.dialogVisible = false
              this.$refs[formName].resetFields()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * @description: 排序
     * @author: 书童
     */
    tableSortChange(column) {
      this.formInline.order = column.order ? column.order : 'descending'
      this.formInline.sort = column.prop
      this.formInline.offset = 0
      this.getList()
    },
    //  获取报警列表数据
    getList() {
      policeList(this.formInline).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 跳转
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    },
    // 弹窗返回
    confirm() {
      this.close()
      this.getList()
    },
    //  关闭弹窗组件
    close() {
      this.detailFlag = false
      this.detailId = 0
    },
    closeInfo() {
      this.infoFlag = false
      this.infoId = 0
    },
  },
}
</script>

<style lang="scss" scoped>
.cardH {
  height: 40px;
}
.itemWidth {
  width: 120px;
}
</style>
